//推荐使用class定义样式，且请以'组件名'作为前缀(避免与其他组件class产生冲突)
//It is recommended to use class to define the style, and please prefix with 'component name'(Avoid conflicts with other component class)

._BoxTabs{

}

._BoxTabs-Tabs{
    display: flex;
    flex-direction: row;
    gap: var(--Theme-Gap-SM);
}

._BoxTabs-Tabs-Arrow{
    width: var(--Theme-Text);
    color: var(--Theme-Color-Text-SM);
    cursor: pointer;
    transition-property: color;
    transition-duration: var(--Theme-TransDuration);
    &:first-child{
        margin-left: -2.87px;
    }
    &:last-child{
        margin-right: -2.87px;
    }
    &:hover{
        color:var(--Theme-Color-Active);
    }
}

._BoxTabs-Tabs-Body{
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
    scroll-behavior: smooth;
    overflow-x: auto;
    gap: var(--Theme-Gap);
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
}

._BoxTabs-Tabs-Item{
    outline: none;
    flex: 1;
    position: relative;
    padding-bottom:var(--Theme-Gap-XS);
    white-space: nowrap;
    transition: color var(--Theme-TransDuration);
    scroll-snap-align: start;

    ._BoxTabs-Tabs-ItemActive{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0.15rem;
        width: 100%;
        background: var(--Theme-Color-Active);
        transform: scaleX(0);
        transition: transform var(--Theme-TransDuration);
    }
    &:hover{
        color: var(--Theme-Color-ActiveHover);
        ._BoxTabs-Tabs-ItemActive{
            transform: scaleX(100%);
        }
    }
    &[data-selected]{
        color: var(--Theme-Color-Active);
        ._BoxTabs-Tabs-ItemActive{
            transform: scaleX(100%);
        }
    }
}

._BoxTabs-Panel{
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    padding-top: var(--Theme-Gap-SM);
}

._BoxTabs-Panel-Item{
    width: 100%;
    flex-shrink: 0;
    opacity: 0;
    text-align: justify;
    text-justify: newspaper;
    transition: opacity var(--Theme-TransDuration) ease-in-out;
    &[data-selected]{
        opacity: 100;
        order: -9999;
    }
}